<template>
	<view class="page" :style="{'height':h+'px','padding-top':mt+'px'}">
		<c-nav-bar title="改签"></c-nav-bar>
		<view class="top">
			<view class="box">
				<view class="info">
						<view class="date" v-if="!isCarShip">
						<text>{{cfDate}}</text>
						<text>{{cfWeek}}出发</text>
					</view>
					<view class="date date_ship" v-else>
						<text>{{cfDate}}</text>
						<text>{{cfWeek}}出发</text>
						<view class="ds_time" v-if="item.timeMemosStr">
							<image src="https://i.ringzle.com/file/20240325/7ee2b8607f1344638cec2a68f5056593.png"></image>
							<span>{{item.timeMemosStr}}</span>
						</view>
					</view>
					<view class="time_addr" v-if="!isCarShip">
						<view class="ta_time">
							<text>{{item.sailTime}}</text>
							<text>{{item.clxm}}</text>
						</view>
						<view class="ta_addr">
							<image src="@/static/index/steamerTicket/icon_line2.png" mode=""></image>
							<view>
								<text>{{item.startPortName}}</text>
								<text>{{item.endPortName}}</text>
							</view>
						</view>
					</view>
					<view class="time_addr ta_car_ship" v-else>
						<view class="ta_time">
							<text>{{item.busStartTime}} 开车</text>
							<text>{{item.sailTime}} 开船</text>
							<text style="color: transparent;">d</text>
						</view>
						<view class="ta_addr">
							<image src="https://i.ringzle.com/file/20240325/b68b2d2aa04f4c50b70ebe13341f25ec.png" mode=""></image>
							<view>
								<text>{{item.startPortName||''}}</text>
								<text>{{item.embarkPortName||''}}</text>
								<text>{{item.endPortName||''}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="tb_bottom" @tap="toInstructions">
					<view>
						<image src="https://i.ringzle.com/file/20240220/51374f7aa1ae44ca9fc0703f395a6118.png"></image>
						<text>取退改票说明</text>
					</view>
					<image src="@/static/index/steamerTicket/icon_yjt.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="ship_spaces" v-if="!shipShow">
			<text>选择舱位</text>
			<view class="box">
				<view v-for="(pre,index) in item.seatClasses" :key="index" :class="(hasLocal?(pre.localCurrentCount===0&&pre.pubCurrentCount===0):(pre.pubCurrentCount===0))?'active':''">
					<view class="sb_left">
						<image :src="cic.cabinImg[pre.className]||cic.defaultImg"></image>
						<view class="sbl_info">
							<view class="cbli_title">{{pre.className}}</view>
							<view class="cbli_item" :style="{'margin-top':(hasLocal?20:55)+'rpx'}">公共舱：余票 {{pre.pubCurrentCount}} 张</view>
							<view class="cbli_item" v-if="hasLocal">本地舱：余票 {{pre.localCurrentCount}} 张</view>
						</view>
					</view>
					<view class="sb_right">
						<view class="sbr_price">
							<text>￥</text>
							<text class="sbrp_p">{{hasLocal?pre.localPrice:pre.totalPrice}}</text>
							<text>起</text>
						</view>
						<view class="sbr_yd" :class="pre.selected?'active':''" @tap="(!hasLocal?pre.pubCurrentCount!=0:(pre.pubCurrentCount!=0||pre.localCurrentCount!=0))?toSelected(pre,index):''">{{pre.selected?'已选':'预订'}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="ship_spaces ship_spaces_car" v-else>
			<text>车辆及随车人员</text>
			<view class="box">
				<view v-for="(pre,index) in item.driverSeatClass" :key="index" :class="(hasLocal?(pre.localCurrentCount===0&&pre.pubCurrentCount===0):(pre.pubCurrentCount===0))?'active':''">
					<view class="sb_left">
						<image :src="cic.cabinImg['中舱']"></image>
						<view class="sbl_info">
							<view class="cbli_title">{{pre.className}}</view>
							<view class="cbli_item" :style="{'margin-top':(hasLocal?20:55)+'rpx'}">公共舱：余票 {{pre.pubCurrentCount}} 张</view>
							<view class="cbli_item" v-if="hasLocal">本地舱：余票 {{pre.localCurrentCount}} 张</view>
						</view>
					</view>
					<view class="sb_right">
						<view class="sbr_price">
							<text>￥</text>
							<text class="sbrp_p">{{hasLocal?pre.localPrice:pre.totalPrice}}</text>
							<text>起</text>
						</view>
						<view class="sbr_yd" :class="pre.selected?'active':''" @tap="(!hasLocal?(pre.pubCurrentCount!=0):(pre.pubCurrentCount!=0||pre.localCurrentCount!=0))?toSelectCar(pre,index):''">{{pre.selected?'已选':'预订'}}</view>
					</view>
				</view>
			</view>
			<text class="mt49">同乘人可选舱位</text>
			<view class="box">
				<view v-for="(pre,index) in item.seatClasses" :key="index" :class="(hasLocal?(pre.localCurrentCount===0&&pre.pubCurrentCount===0):(pre.pubCurrentCount===0))?'active':''">
					<view class="sb_left">
						<image :src="cic.cabinImg[pre.className]||cic.defaultImg"></image>
						<view class="sbl_info">
							<view class="cbli_title">{{pre.className}}</view>
							<view class="cbli_item" :style="{'margin-top':(hasLocal?20:55)+'rpx'}">公共舱：余票 {{pre.pubCurrentCount}} 张</view>
							<view class="cbli_item" v-if="hasLocal">本地舱：余票 {{pre.localCurrentCount}} 张</view>
						</view>
					</view>
					<view class="sb_right">
						<view class="sbr_price">
							<text>￥</text>
							<text class="sbrp_p">{{hasLocal?pre.localPrice:pre.totalPrice}}</text>
							<text>起</text>
						</view>
						<view class="sbr_yd" :class="pre.selected?'active':''" @tap="(!hasLocal?pre.pubCurrentCount!=0:(pre.pubCurrentCount!=0||pre.localCurrentCount!=0))?toSelected(pre,index):''">{{pre.selected?'已选':'预订'}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="sure" :class="selectList.length>0?'active':''" @tap="sureChangeTicket">确认改签</view>
	</view>
</template>

<script>
	export default {
		name:'confirmBooking',
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight - 80,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				item:'',
				show:false,
				shipShow:false,
				selectList:[],
				price:0,
				cfDate:'',
				cfWeek:'',
				weeks:['周日','周一','周二','周三','周四','周五','周六'],
				hasLocal:false,//是否包含本地人
				cic:this.$cic,
				isCarShip: false
			}
		},
		onLoad(option) {
			if(option.type&&option.type=='ship') this.show = true;
			if(option.item){
				this.item = JSON.parse(option.item);
				if (this.item.startPortName.indexOf('上海') > -1) this.isCarShip = true;
				for(let i = 0;i<this.item.seatClasses.length;i++){
					this.$set(this.item.seatClasses[i],'selected',false);
				}
				this.item.driverSeatClass&&this.item.driverSeatClass.forEach((d,i)=>{
					this.$set(this.item.driverSeatClass[i],'selected',false)
				})
				this.cfDate = new Date(this.item.sailDate).Format('MM月dd日');
				this.cfWeek = this.weeks[new Date(this.item.sailDate).getDay()];
				this.getIsLocal();
			} 
		},
		onReady() {
			if(uni.getStorageSync('shipType')&&uni.getStorageSync('shipType')==2) this.shipShow = true
		},
		methods: {
			sureChangeTicket(){
				if(this.selectList.length==0) return
				//调用改签接口成功后
				let params = {
					orderId:JSON.parse(uni.getStorageSync('change_ticket_info')).orderId,
					orderItemId:JSON.parse(uni.getStorageSync('change_ticket_info')).orderItemId,
					lineNum:this.item.lineNum,
					lineName:this.item.lineName,
					lineNo:this.item.lineNo,
					shipName:this.item.shipName,
					sailDate:this.item.sailDate,
					sailTime:this.item.sailTime,
					seatClass:this.selectList[0].classNum,
					seatClassName:this.selectList[0].className,
					sx:this.item.sx,
					busStartTime:this.item.busStartTime,
					clxh:this.item.clxh,
					clxm:this.item.clxm,
					hxlxh:this.item.hxlxh,
					hxlxm:this.item.hxlxm,
					bus:this.item.bus,
					bus2:this.item.bus2
				}
				this.$api.post('/api/travel/api/ship/order/apiAlter',params).then(res=>{
					if(res.data.code==0){
						uni.redirectTo({ 
							url:'/pagesIndex/steamerTicket/payResult?orderId='+params.orderId+'&gqType=true'
						});
					}else this.$showModal(res.data.msg);
				})
			},
			getIsLocal(){
				if(!uni.getStorageSync('userInfo')) return
				this.$api.get('/api/commonPerson/isLocalCount',{openId:JSON.parse(uni.getStorageSync('userInfo')).openId,isLocal:1}).then(res=>{
					if(res.data.code===0){
						this.hasLocal = res.data.data>0?true:false;
					}else this.$showModal(res.data.msg);
				})
			},
			loginSuccess(){
				this.getIsLocal();
			},
			toSelectCar(item,index){
				if(!this.hasLocal&&!item.pubCurrentCount) return
				if(this.hasLocal&&!item.localCurrentCount&&!item.pubCurrentCount) return
				
				item.type = 1;
				if(!this.item.driverSeatClass) return
				this.$set(this.item.driverSeatClass[index],'selected',!this.item.driverSeatClass[index].selected);
				if(this.item.driverSeatClass[index].selected) this.selectList.push(item)
				else{
					let idx = this.selectList.findIndex(d=>d.className==item.className);
					if(idx>=0) this.selectList.splice(idx,1)
				}
			},
			toSelected(item,index){
				if(!this.hasLocal&&!item.pubCurrentCount) return
				if(this.hasLocal&&!item.localCurrentCount&&!item.pubCurrentCount) return
				
				item.type = 2;
				if(!this.item.seatClasses) return
				this.$set(this.item.seatClasses[index],'selected',!this.item.seatClasses[index].selected);
				if(this.item.seatClasses[index].selected) this.selectList.push(item)
				else{
					let idx = this.selectList.findIndex(d=>d.className==item.className);
					if(idx>=0) this.selectList.splice(idx,1)
				}
			},
			//取退改票说明
			toInstructions(){
				uni.navigateTo({
					url:'/pagesIndex/steamerTicket/ticketingInstructions?title=取票、退票、改签说明'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		padding-bottom: 100rpx;
		overflow: auto;
		background: #F5F8FA;
		.top{
			padding: 20rpx 24rpx;
			.box{
				width: 100%;
				background: #FFFFFF;
				border-radius: 16rpx;
				.info{
					background-color: #007A69;
					border-radius: 16rpx;
					padding: 40rpx 24rpx;
					.date{
						display: flex;
						text{
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							&:last-child{
								margin-left: 15rpx;
							}
						}
						&.date_ship{
							text{
								&:nth-child(2){
									margin-left: 15rpx;
								}
								&:nth-child(3){
									margin-left: 23rpx;
								}
							}
						}
					}
					.time_addr{
						padding: 30rpx 0 0 96rpx;
						display: flex;
						align-items: center;
						.ta_time{
							display: flex;
							flex-direction: column;
							align-items: center;
							margin-top: -12rpx;
							text{
								&:first-child{
									font-size: 40rpx;
									font-family: PingFang-SC-Bold, PingFang-SC;
									font-weight: bold;
									color: #FFFFFF;
								}
								&:last-child{
									font-size: 24rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #FFFFFF;
									margin-top: 30rpx;
								}
							}
						}
						.ta_addr{
							display: flex;
							align-items: center;
							padding-left: 40rpx;
							image{
								width: 8rpx;
								height: 68rpx;
							}
							&>view{
								padding-left: 20rpx;
								display: flex;
								flex-direction: column;
								text{
									font-size: 30rpx;
									font-family: PingFang-SC-Bold, PingFang-SC;
									font-weight: bold;
									color: #FFFFFF;
									&:last-child{
										margin-top: 29rpx;
									}
								}
							}
						}
						
						&.ta_car_ship{
							padding: 30rpx 0 0 80rpx;
							.ta_time{
								margin-top: 0;
								text{
									font-family: PingFang-SC, PingFang-SC;
									font-weight: bold;
									font-size: 30rpx;
									color: #FFFFFF;
									margin-top: 28rpx;
									&:first-child{
										margin-top: 0;
									}
								}
							}
							.ta_addr{
								padding-left: 20rpx;
								image{
									width: 8rpx;
									height: 128rpx;
								}
								&>view{
									margin-top:0;
									text{
										margin-top: 28rpx;
										&:first-child{
											margin-top: 0;
										}
									}
								}
							}
						}
					}
				}
				.tb_bottom{
					padding: 27rpx 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					&>view{
						display: flex;
						align-items: center;
						image{
							width: 26rpx;
							height: 26rpx;
						}
						text{
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #007A69;
							margin-left: 10rpx;
						}
					}
					&>image{
						width: 24rpx;
						height: 24rpx;
					}
				}
			}
		}
	
		.ship_spaces{
			padding: 30rpx 24rpx;
			&>text{
				font-size: 36rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #111111;
			}
			
			.box{
				padding: 16rpx 0;
				&>view{
					width: 100%;
					margin-top: 20rpx;
					padding: 20rpx 24rpx 20rpx 20rpx;
					box-sizing: border-box;
					border-radius: 12rpx;
					background: #fff;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.sb_left{
						display: flex;
						image{
							width: 156rpx;
							height: 156rpx;
						}
						.sbl_info{
							padding-left: 24rpx;
							.cbli_title{
								font-size: 32rpx;
								font-family: PingFang-SC-Bold, PingFang-SC;
								font-weight: bold;
								color: #111111;
								margin-top: 12rpx;
							}
							.cbli_item{
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #666666;
								margin-top: 14rpx;
							}
						}
					}
					.sb_right{
						.sbr_price{
							display: flex;
							align-items: flex-end;
							text{
								display: flex;
								align-items: center;
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #FE401A;
								&.sbrp_p{
									font-size: 44rpx;
									font-family: Arial-BoldMT, Arial;
									font-weight: normal;
									color: #FE401A;
									line-height: 38rpx;
								}
							}
						}
						.sbr_yd{
							width: 108rpx;
							height: 56rpx;
							background: #007A69;
							border-radius: 10rpx;
							line-height: 56rpx;
							text-align: center;
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							margin-top: 24rpx;
							&.active{
								background:#007A69;
								
							}
						}
					}
					
					&.active{
						text{
							color: #AAAAAA !important;
						}
						.sbr_yd{
							background: #CCCCCC;
						}
					}
				}
			}
		
			&.ship_spaces_car{
				&>text{
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
				.mt49{
					margin-top: 49rpx;
				}
				.sb_left{
					text{
						font-size: 32rpx !important;
						font-family: PingFang-SC-Bold, PingFang-SC !important;
						font-weight: bold !important;
						color: #111111 !important;
						margin-top: 0 !important;
					}
				}
			}
		}
	
		.sure{
			width: calc(100% - 48rpx);
			height: 88rpx;
			position: fixed;
			bottom: 70rpx;
			left: 24rpx;
			background: #CCCCCC;
			border-radius: 44rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			letter-spacing: 2rpx;
			&.active{
				background: #007A69;
			}
		}
	}
</style>